<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>活动明细</title>

    <% include ../../common.ejs %>
    <style>
        .main {
            margin: 20px 40px;
        }

        .main ._caption {
            font-size: 30px;;
        }

        .input-costom {

            width: 130px;;
            margin-right: 0px;
        }

        .marginTB {
            margin: 20px 0px;
        }

        ._five .form-group ._five textarea {
            width: 200px;
        }
    </style>
    <script type="text/javascript" src="../../javascripts/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="../../javascripts/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="../../javascripts/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.form_datetime').datetimepicker({
                format: 'yyyy-mm-dd',
                language: 'zh-CN',
                minView: "month",
                autoclose: true
            });
        })

        function toUpdate() {
            $(".form-control").attr("", false);
        }
        var checkSubject = function () {
            if ($("#subject").val() == "") {
                $("#msg1").html("<img src='/images/icons/failure.png' style='height: 25px;width: 25px;'>");
                return false;
            }
            else {
                $("#msg1").html("<img src='/images/icons/success.png' style='height: 25px;width: 25px;'>");
            }
        }

        var checkLocation = function () {
            if ($("#location").val() == "") {
                $("#msg2").html("<img src='/images/icons/failure.png' style='height: 25px;width: 25px;'>");
                return false;
            }
            else {
                $("#msg2").html("<img src='/images/icons/success.png' style='height: 25px;width: 25px;'>");
            }
        }

        var getDate = function () {
            var date = new Date();
            var year, month, day;
            var dataStr = "";
            year = date.getYear() + 1900;
            if (date.getMonth() + 1 < 10) {
                month = "0" + (date.getMonth() + 1);
            } else {
                month = date.getMonth() + 1;
            }
            if (date.getDate() < 10) {
                day = "0" + date.getDate();
            } else {
                day = date.getDate();
            }
            dataStr = dataStr + year + "-" + month + "-" + day;
            console.log(dataStr);
            return dataStr;
        }

        var checkStartTime = function () {
            if ($("#startTime").val() == "") {
                $("#msg3").html("<img src='/images/icons/failure.png' style='height: 25px;width: 25px;'>");
                return false;
            }
            else {
                if ($("#startTime").val() >= getDate()) {
                    $("#msg3").html("<img src='/images/icons/success.png' style='height: 25px;width: 25px;'>");
                }
                else {
                    $("#msg3").html("<img src='/images/icons/failure.png' style='height: 25px;width: 25px;'>");
                    return false;
                }
            }
        }

        var checkEndTime = function () {
            if ($("#endTime").val() == "") {
                $("#msg4").html("<img src='/images/icons/failure.png' style='height: 25px;width: 25px;'>");
                return false;
            }
            else {
                if ($("#startTime").val().toString() > $("#endTime").val().toString()) {
                    $("#msg4").html("<img src='/images/icons/failure.png' style='height: 25px;width: 25px;'>");
                    return false;
                } else {
                    $("#msg4").html("<img src='/images/icons/success.png' style='height: 25px;width: 25px;'>");
                }
            }
        }

        var checkNumber = function () {
            if ($("#number").val() == "") {
                $("#msg5").html("<img src='/images/icons/failure.png' style='height: 25px;width: 25px;'>");
                return false;
            }
            else {
                $("#msg5").html("<img src='/images/icons/success.png' style='height: 25px;width: 25px;'>");
            }
        }

        var checkContent = function () {
            if ($("#content").val() == "") {
                $("#msg6").html("<img src='/images/icons/failure.png' style='height: 25px;width: 25px;'>");
                return false;
            }
            else {
                $("#msg6").html("<img src='/images/icons/success.png' style='height: 25px;width: 25px;'>");
            }
        }

        var checkAll = function () {
            if (checkSubject() == false) {
                return false;
            }
            if (checkLocation() == false) {
                return false;
            }
            if (checkStartTime() == false) {
                return false;
            }
            if (checkEndTime() == false) {
                return false;
            }
            if (checkNumber() == false) {
                return false;
            }
            if (checkContent() == false) {
                return false;
            }
        }

        function submitForm() {
            if (checkAll() == false) {
                return false;
            }
        }
    </script>
</head>
<body background="../images/whiteBg.png">
<div id="top">
    <% include ../top.ejs %>
</div>
<div class="container-fluid" style="margin-top: 20px;">
    <div class="row ">
        <div class="col-md-1">
        </div>
        <div id="left" class="col-md-2">
            <% include ../left.ejs %>
        </div>
        <div class="col-md-8 bodyDiv" id="right">

            <div class="main">
                <form method="post" action="/admin/activityManage/activityDetail" onsubmit="return checkAll()">

                    <div>
                        <span class="_caption"><p style="text-align:center; ">活动详情</p></span>
                    </div>
                    <div class="row marginTB">
                        <div class="col-md-6 ">
                            <div class="col-md-4">
                                <span style="font-size: 20px">活动主题</span>
                            </div>
                            <div class="col-md-5">
                                <input type="text" id="subject" name="subject" class="form-control input-costom"
                                       value="<%= active.active.subject %>" onblur="checkSubject()">
                            </div>
                            <div class="col-md-1" id="msg1"></div>

                        </div>
                        <div class="col-md-6  ">

                            <div class="col-md-4">
                                <span style="font-size: 20px">活动地点</span>
                            </div>
                            <div class="col-md-5">
                                <input type="text" id="location" name="location" class="form-control input-costom"
                                       value="<%= active.active.location %>" onblur="checkLocation()">
                            </div>
                            <div class="col-md-1" id="msg2"></div>
                        </div>
                    </div>

                    <div class="row marginTB">
                        <div class="col-md-6 ">
                            <div class="col-md-4">
                                <span style="font-size: 20px">开始时间</span>
                            </div>
                            <div class="col-md-5">
                                <input type="text" id="startTime" name="startTime"
                                       class="form-control form_datetime input-costom"
                                       value="<%= active.active.startTime %>" onblur="checkStartTime()">
                            </div>
                            <div class="col-md-1" id="msg3"></div>
                        </div>
                        <div class="col-md-6 ">

                            <div class="col-md-4">
                                <span style="font-size: 20px">结束时间</span>
                            </div>
                            <div class="col-md-5">
                                <input type="text" id="endTime" name="endTime"
                                       class="form-control form_datetime input-costom"
                                       value="<%= active.detail.endTime %>" onblur="checkEndTime()">
                            </div>
                            <div class="col-md-1" id="msg4"></div>
                        </div>
                    </div>


                    <div class="row marginTB">
                        <div class="col-md-6 ">
                            <div class="col-md-4">
                                <span style="font-size: 20px">活动人数</span>
                            </div>
                            <div class="col-md-5">
                                <input type="text" id="number" name="number" class="form-control input-costom"
                                       value="<%= active.active.number %>" onblur="checkNumber()">
                            </div>
                            <div class="col-md-1" id="msg5"></div>
                        </div>
                        <div class="col-md-6  "></div>
                    </div>

                    <div class="row marginTB">
                        <div class="col-md-6 ">
                            <div class="col-md-4">
                                <span style="font-size: 20px">活动内容</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                        </div>
                    </div>

                    <div class="row marginTB">

                        <div class="col-md-11">

                            <div class="form-group">
                                <textarea id="content" name="content" class="form-control" rows="3"
                                          onblur="checkContent()"><%= active.detail.content %></textarea>
                            </div>
                        </div>
                        <div class="col-md-1 pull-left" id="msg6"></div>
                        <input type="hidden" name="id" value="<%= active.active.id %>">
                        <input type="hidden" name="activeDetailId" value="<%= active.active.activeDetailId %>">
                    </div>
                    <div class="row marginTB">
                        <div class="col-md-8"></div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-primary"
                                    onclick="window.location.href='/admin/activityManage/statistic?activityNumber=<%= active.active.activeDetailId %>';">
                                人数统计
                            </button>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-primary" onclick="toUpdate()">修改</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>


    </div>
</div>
</div>
</body>
</html>